<template>
  <div class="home-main index-model">
    <m-variable></m-variable>
    <m-dag v-if="!isLoading" :type="'instance'"></m-dag>
    <m-spin :is-spin="isLoading"></m-spin>
  </div>
</template>
<script>
  import mDag from './_source/dag.vue'
  import { mapActions, mapMutations } from 'vuex'
  import mSpin from '@/module/components/spin/spin'
  import mVariable from './_source/variable'
  import Affirm from './_source/jumpAffirm'
  import disabledState from '@/module/mixin/disabledState'

  export default {
    name: 'instance-details',
    data () {
      return {
        // loading
        isLoading: true
      }
    },
    mixins: [disabledState],
    props: {},
    methods: {
      ...mapMutations('dag', ['setIsDetails', 'resetParams']),
      ...mapActions('dag', ['getProcessList', 'getResourcesList', 'getInstancedetail']),
      ...mapActions('security', ['getWorkerGroupsAll']),
      /**
       * init
       */
      init () {
        this.isLoading = true
        // Initialization parameters
        this.resetParams()
        // Promise Get node needs data
        Promise.all([
          // Process instance details
          this.getInstancedetail(this.$route.params.id),
          // get process definition
          this.getProcessList(),
          // get resources
          this.getResourcesList(),
          // get worker group list
          this.getWorkerGroupsAll()
        ]).then((data) => {
          let item = data[0]
          let flag = false
          if (item.state !== 'WAITTING_THREAD' && item.state !== 'SUCCESS' && item.state !== 'PAUSE' && item.state !== 'FAILURE' && item.state !== 'STOP') {
            flag = true
          } else {
            flag = false
          }
          this.setIsDetails(flag)
          this.isLoading = false

          // Whether to pop up the box?
          Affirm.init(this.$root)
        }).catch(() => {
          this.isLoading = false
        })
      },
      /**
       * Redraw (refresh operation)
       */
      _reset () {
        this.getInstancedetail(this.$route.params.id).then(res => {
          let item = res
          let flag = false
          if (item.state !== 'WAITTING_THREAD' && item.state !== 'SUCCESS' && item.state !== 'PAUSE' && item.state !== 'FAILURE' && item.state !== 'STOP') {
            flag = true
          } else {
            flag = false
          }
          this.setIsDetails(flag)
        })
      }
    },
    watch: {
      '$route': {
        deep: true,
        handler () {
          this.init()
        }
      }
    },
    created () {
      this.init()
    },
    mounted () {
    },
    components: { mDag, mSpin, mVariable }
  }
</script>